<template>
	<div class="zBox">
		<div class="top">
			<el-form class="xHeight" :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
				<el-form-item label="姓名" prop="name"><el-input v-model="queryParams.name" placeholder="请输入" maxlength="30" /></el-form-item>
				<el-form-item label="月份" prop="time"><el-date-picker v-model="queryParams.month" type="month" placeholder="请选择" value-format="YYYY-MM" /></el-form-item>
				<el-form-item class="pst">
					<div class="cz" @click="reset">重置</div>
					<div class="cx mr-big" @click="getList()">查询</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bottom">
			<div class="pst" style="display: flex;margin-bottom: 20px;">
				<div class="dc" @click="exportExcel(1)">导出打卡记录</div>
				<div class=" dc" @click="exportExcel(2)">导出报表</div>
			</div>

			<el-table class="qjTable" v-loading="loading" :data="typeList" stripe @row-click="staffInfo">
				<el-table-column label="成员" align="center" prop="userName" />
				<el-table-column label="累计出勤" align="center" prop="dayNum" />
				<el-table-column label="迟到次数" align="center" prop="lateNum" />
				<el-table-column label="缺卡次数" align="center" prop="missNum" />
				<el-table-column label="请假时长(小时)" align="center" prop="absenceNum" />
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>
		<el-dialog v-model="dialog" class="dkDia" :title="`考勤信息(${userName})`" width="75%" @close="dialogClose()" :close-on-click-modal="false" top="4vh">
			<p class="date_change">
				<el-icon @click="previousMonth()"><ArrowLeftBold /></el-icon>
				<span>{{ moment(cxformMonth).format('YYYY年MM月') }}</span>
				<el-icon @click="nextMonth()"><ArrowRightBold /></el-icon>
				<span class="today" @click="comeToday()">返回今天</span>
			</p>
			<ul ref="uploadImgBtn">
				<li class="grey">SUN.日</li>
				<li>MON.一</li>
				<li>TUES.二</li>
				<li>WEB.三</li>
				<li>THUR.四</li>
				<li>FRI.五</li>
				<li class="grey">SAT.六</li>
			</ul>
			<el-calendar v-model="cxformMonth" class="myRl">
				<template #date-cell="{ data }">
					<div
						v-if="calendarData[data.day]"
						style="height: 100%;width: 100%;position: relative;"
						class=""
						:class="data.isSelected ? 'is-selected' : ''"
						@click="cfClick(calendarData[data.day])"
					>
						<p class="dateRl">{{ data.day.substr(data.day.length - 2, 2) }}</p>
						<span class="isPunched" v-if="calendarData[data.day].type == 0 && calendarData[data.day].workday == 1"></span>
						<span class="noPunched" v-if="calendarData[data.day].type == 1 && calendarData[data.day].workday == 1"></span>
						<el-popover placement="bottom-start" :width="250" trigger="click" :visible="calendarData[data.day].isOk" :hide-after="0" :offset="-60">
							<template #reference>
								<div class="tk" @click="getAlldata(calendarData[data.day].date)"></div>
							</template>
							<p class="dateBu">{{ moment(calendarData[data.day].date).format('YYYY年MM月DD日') }}</p>

							<ul class="dkList">
								<li>
									<span v-if="dayData[0].status !== null" :class="dayData[0].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
									<span v-else class="mrzt"></span>
									<span>上班（{{ shift.startTime1 }}）</span>
									<span class="dkNzt" v-if="dayData[0].status !== null" :style="{ background: dkZt[dayData[0].status].color }">
										{{ dkZt[dayData[0].status].lable }}
									</span>
								</li>
								<li class="dkLi" v-for="(item, index) in morningUplist">
									<div class="">
										<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
										<span class="dkType" v-if="item.sourceType">
											{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
										</span>
										<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
									</div>

									<p v-if="item.sourceType == 'OUT'" class="bzStyle">
										{{ '备注：' + item.remark }}
										<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
									</p>
								</li>
								<li>
									<span v-if="dayData[1].status !== null" :class="dayData[1].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
									<span v-else class="mrzt"></span>
									<span>下班（{{ shift.endTime1 }}）</span>
									<span class="dkNzt" v-if="dayData[1].status !== null" :style="{ background: dkZt[dayData[1].status].color }">
										{{ dkZt[dayData[1].status].lable }}
									</span>
								</li>

								<li class="dkLi" v-for="(item, index) in morningDownlist">
									<div class="">
										<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
										<span class="dkType" v-if="item.sourceType">
											{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
										</span>
										<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
									</div>

									<p v-if="item.sourceType == 'OUT'" class="bzStyle">
										{{ '备注：' + item.remark }}
										<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
									</p>
								</li>
								<li>
									<span v-if="dayData[2].status !== null" :class="dayData[2].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
									<span v-else class="mrzt"></span>
									<span>上班（{{ shift.startTime2 }}）</span>
									<span class="dkNzt" v-if="dayData[2].status !== null" :style="{ background: dkZt[dayData[2].status].color }">
										{{ dkZt[dayData[2].status].lable }}
									</span>
								</li>
								<li class="dkLi" v-for="(item, index) in afterUplist">
									<div class="">
										<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
										<span class="dkType" v-if="item.sourceType">
											{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
										</span>
										<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
									</div>

									<p v-if="item.sourceType == 'OUT'" class="bzStyle">
										{{ '备注：' + item.remark }}
										<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
									</p>
								</li>

								<li>
									<span v-if="dayData[3].status !== null" :class="dayData[3].status == 4 ? 'dkZcZt' : 'dkYcZt'"></span>
									<span v-else class="mrzt"></span>
									<span>下班（{{ shift.endTime2 }}）</span>
									<span class="dkNzt" v-if="dayData[3].status !== null" :style="{ background: dkZt[dayData[3].status].color }">
										{{ dkZt[dayData[3].status].lable }}
									</span>
								</li>
								<li class="dkLi" v-for="(item, index) in afterDownlist">
									<div class="">
										<span class="dkTime" v-if="item.userCheckTime">{{ item.userCheckTime.slice(11, 16) }}</span>
										<span class="dkType" v-if="item.sourceType">
											{{ item.sourceType == 'CAMERA' ? '摄像头打卡' : item.sourceType == 'HK' ? '门禁打卡' : item.address }}
										</span>
										<span v-if="item.sourceType == 'OUT'" class="wqs">【外勤】</span>
									</div>
									<p v-if="item.sourceType == 'OUT'" class="bzStyle">
										{{ '备注：' + item.remark }}
										<u @click="bigImgOut(item.phoneUrl)">【查看图片】</u>
									</p>
								</li>
							</ul>
						</el-popover>
					</div>
					<div v-if="!calendarData[data.day]" class="" style="height: 100%;width: 100%;" @click="cfClick()">
						<p class="dateRl">{{ data.day.substr(data.day.length - 2, 2) }}</p>
						<div class=""></div>
					</div>
				</template>
			</el-calendar>
		</el-dialog>

		<el-dialog v-model="outImgDialog" class="dkDia" title="外勤打卡信息" width="30%" :close-on-click-modal="false" top="6vh">
			<el-image :src="outImgUrl" style="width: 100%;">
				<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
			</el-image>
		</el-dialog>
		<el-dialog v-model="exportDialog" class="dkDia" title="导出" width="25%" :close-on-click-modal="false" top="30vh">
			<el-form ref="ruleFormRef" :model="exportForm" :rules="rules" label-width="83px" label-position="top">
				<el-form-item style="width: 100%;" label="导出日期:" prop="content">
					<el-date-picker
						style="height: 40px;"
						v-model="exportForm.exportDate"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="YYYY-MM-DD"
					></el-date-picker>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancle">取消</el-button>
					<el-button type="primary" @click="handleExport()">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { getDeptAttendance, getMonthData, getUserDataByDate, getDkList, exportPunchCard, exportReport, cardList } from '@/api/hkd';
import useUserStore from '@/store/modules/user';
import moment from 'moment';
import { nextTick } from 'vue';
import headurl from '@/assets/images/head.png';
import { ElMessage, ElMessageBox } from 'element-plus';

const typeList = ref([]);
const total = ref(0);
const loading = ref(true);
const userId = ref(useUserStore().userId);
const dingUserId = ref(useUserStore().dingUserId);
const { proxy } = getCurrentInstance();
const data = reactive({
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		month: ''
	},
	exportForm: {}
});
const cxformMonth = ref('');
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const { queryParams, exportForm } = toRefs(data);
//成员数据
const userName = ref('');
const dialog = ref(false);
const calendarData = ref([]);
const uploadImgBtn = ref(null);
const morningUplist = ref([]);
const morningDownlist = ref([]);
const afterUplist = ref([]);
const afterDownlist = ref([]);
const outImgUrl = ref('');
const isEmpty = ref('');
const outImgDialog = ref(false);
let prevBtn = undefined;
let nextBtn = undefined;
let todayBtn = undefined;
const dkZt = ref({
	0: { color: '#f56c6c', lable: '未打卡' },
	1: { color: '#f56c6c', lable: '缺卡' },
	2: { color: '#f56c6c', lable: '迟到' },
	3: { color: '#f56c6c', lable: '请假' },
	4: { color: '#aaf4a5', lable: '正常' }
});
const dayData = ref([
	{
		status: null
	},
	{
		status: null
	},
	{
		status: null
	},
	{
		status: null
	}
]);
const shift = ref({});
const punchCardList = ref([]);
const exportDialog = ref(false);
const exportType = ref('');

onMounted(() => {
	queryParams.value.month = moment()
		.locale('zh-cn')
		.format('YYYY-MM');
	getList();
});

function exportExcel(type) {
	exportType.value = type;
	exportDialog.value = true;
}
function cancle() {
	exportDialog.value = false;
	exportForm.value.exportDate = undefined;
}

/** 导出按钮操作 */
function handleExport() {
	if (exportForm.value.exportDate) {
		exportDialog.value = false;
		loading.value = true;
		let form = {
			beginDate: exportForm.value.exportDate[0],
			endDate: exportForm.value.exportDate[1]
		};
		if (exportType.value == 1) {
			exportPunchCard(form).then(res => {
				const content = res;
				const blob = new Blob([content]);
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a');
					elink.download = form.beginDate + '至' + form.endDate + '打卡记录.xls';
					elink.style.display = 'none';
					elink.href = URL.createObjectURL(blob);
					document.body.appendChild(elink);
					elink.click();
					URL.revokeObjectURL(elink.href); // 释放URL 对象
					document.body.removeChild(elink);
					loading.value = false;
					exportForm.value.exportDate = undefined;
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, form.beginDate + '至' + form.endDate + '打卡记录.xls');
					loading.value = false;
					exportForm.value.exportDate = undefined;
				}
			});
		} else {
			exportReport(form).then(res => {
				const content = res;
				const blob = new Blob([content]);
				if ('download' in document.createElement('a')) {
					// 非IE下载
					const elink = document.createElement('a');
					elink.download = form.beginDate + '至' + form.endDate + '考勤统计.xls';
					elink.style.display = 'none';
					elink.href = URL.createObjectURL(blob);
					document.body.appendChild(elink);
					elink.click();
					URL.revokeObjectURL(elink.href); // 释放URL 对象
					document.body.removeChild(elink);
					loading.value = false;
					exportForm.value.exportDate = undefined;
				} else {
					// IE10+下载
					navigator.msSaveBlob(blob, form.beginDate + '至' + form.endDate + '考勤统计.xls');
					loading.value = false;
					exportForm.value.exportDate = undefined;
				}
			});
		}
	} else {
		exportDialog.value = true;
		ElMessage({
			type: 'error',
			message: '请选择导出日期'
		});
	}
}
function dialogClose() {
	if (isEmpty.value != '') {
		isEmpty.value.isOk = false;
		isEmpty.value = '';
	}
}

//点击table
function staffInfo(row) {
	// initDom();
	dialog.value = true;
	userName.value = row.userName;
	userId.value = row.userId;
	dingUserId.value = row.dingUserId;
	cxformMonth.value = queryParams.value.month;
	getAllMonthData();
}
// 获取日历数据
function getAllMonthData() {
	cxformMonth.value = moment(cxformMonth.value).format('YYYY-MM');
	getMonthData({
		userId: userId.value,
		month: cxformMonth.value
	}).then(res => {
		let newObj = {};
		const obj = { ...res.data };
		for (var i = 0; i < res.data.length; i++) {
			obj[i]['isOk'] = false;
			newObj[obj[i].date] = obj[i];
		}
		let form = JSON.parse(JSON.stringify(newObj));
		calendarData.value = form;
	});
}
function previousMonth() {
	prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
	let amonth = cxformMonth.value;
	cxformMonth.value = moment(amonth)
		.subtract(1, 'months')
		.format('YYYY-MM');
	prevBtn.click();
	getAllMonthData();
}

function nextMonth() {
	nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:last-child');
	let amonth = cxformMonth.value;
	cxformMonth.value = moment(amonth)
		.add(1, 'months')
		.format('YYYY-MM');
	nextBtn.click();
	getAllMonthData();
}
function comeToday() {
	todayBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
	cxformMonth.value = moment().format('YYYY-MM');
	todayBtn.click();
	getAllMonthData();
}

function getAlldata(date) {
	let form = {
		userId: userId.value,
		date: date
	};
	dayData.value = [
		{
			status: null
		},
		{
			status: null
		},
		{
			status: null
		},
		{
			status: null
		}
	];

	getUserDataByDate(form).then(res => {
		morningDownlist.value = [];
		morningUplist.value = [];
		afterDownlist.value = [];
		afterUplist.value = [];
		shift.value = res.data.shift;
		res.data.punchCardList.forEach(ele => {
			if (ele.state == 1) {
				dayData.value[0].status = ele.status;
			} else if (ele.state == 2) {
				dayData.value[1].status = ele.status;
			} else if (ele.state == 3) {
				dayData.value[2].status = ele.status;
			} else if (ele.state == 4) {
				dayData.value[3].status = ele.status;
			}
		});
		cardList({
			date: date,
			dingUserId: dingUserId.value
		}).then(res => {
			punchCardList.value = res.data.reverse();
			let morningUp = date + '\xa0' + shift.value.endTime1;
			let morningDown = moment(date + '\xa0' + shift.value.startTime2)
				.subtract(30, 'minutes')
				.format('YYYY-MM-DD HH:mm:ss');
			let aftDown = date + '\xa0' + shift.value.endTime2;
			// debugger;
			punchCardList.value.map(item => {
				item.userCheckTime = item.userCheckTime.replaceAll('-', '/');
				//早上上班(8:00-11:30)
				if (new Date(item.userCheckTime).getTime() < new Date(morningUp).getTime()) {
					morningUplist.value.push(item);
				} else if (new Date(morningUp).getTime() <= new Date(item.userCheckTime).getTime() && new Date(item.userCheckTime).getTime() < new Date(morningDown).getTime()) {
					morningDownlist.value.push(item);
				} else if (new Date(morningDown).getTime() <= new Date(item.userCheckTime).getTime() && new Date(item.userCheckTime).getTime() < new Date(aftDown).getTime()) {
					afterUplist.value.push(item);
				} else {
					afterDownlist.value.push(item);
				}
			});
		});
	});
}

function cfClick(row) {
	if (!row) {
		if (isEmpty.value) {
			isEmpty.value.isOk = false;
			isEmpty.value = '';
		} else {
		}
	} else {
		if (isEmpty.value) {
			if (row == isEmpty.value) {
				row.isOk = !row.isOk;
				isEmpty.value = '';
			} else {
				isEmpty.value.isOk = false;
				row.isOk = !row.isOk;
				isEmpty.value = row;
			}
		} else {
			isEmpty.value = row;
			row.isOk = !row.isOk;
		}
	}
}

function bigImgOut(item) {
	outImgDialog.value = true;
	outImgUrl.value = baseUrl + '/' + item;
}

function reset() {
	queryParams.value = {
		pageNum: 1,
		pageSize: 10,
		month: moment()
			.locale('zh-cn')
			.format('YYYY-MM')
	};
	getList();
}

function detail(absenceId) {
	detailDialogVisible.value = true;
	getAbsenceDetail({ absenceId: absenceId }).then(res => {
		if (res.code == 200) {
			absence_type.value.map(item => {
				if (item.value == res.data.absence.type) {
					res.data.absence.type = item.label;
					qjDetail.value = res.data.absence;
				}
			});
			if (res.data.reportBack) {
				xjDetail.value = res.data.reportBack;
			}
		} else {
			ElMessage({
				type: 'warning',
				message: res.errmsg
			});
		}
	});
}

function getList() {
	loading.value = true;
	getDeptAttendance(queryParams.value).then(response => {
		typeList.value = response.rows;
		total.value = response.total;
		loading.value = false;
	});
}
</script>

<style lang="scss" scoped>
.qjButtonBox {
	padding: 20px 30px;
}
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
	margin-bottom: 20px;
	span {
		margin: 0 !important;
		font-weight: 400;
	}
}
.dc::before {
	content: '';
	padding-left: 20px;
	margin-right: 5px;
	background: url(../../assets/images/mainImg/dc.png) no-repeat;
	background-size: 90%;
}
:deep(.el-form) {
	.left {
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}

:deep(.left) {
	width: 50%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
}

:deep(.qjTable) {
	height: calc(100% - 110px);
	// min-height: 400px;
	overflow: auto;
	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 58px !important;
			font-size: 13px;
			border: none !important;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			td {
				border: none !important;
				height: 55px;
				cursor: pointer;
			}
		}
	}
}

.zBox {
	height: 100%;
}

.bottom {
	background: #ffffff;
	border-radius: 0.625rem;
	height: 87.5%;
	margin-top: 20px;
	padding: 20px;
}
.top {
	background: #ffffff;
	padding: 20px 20px 2px 20px;
	border-radius: 10px;
}
:deep(.xHeight) {
	.el-form-item__label {
		height: 40px;
		line-height: 40px;
	}
}
.pst {
	.dc {
		cursor: pointer;
		margin-right: 10px;
		padding: 8px 10px;
		background: #be1a21;
		color: #fff;
		border-radius: 5px;
		font-size: 14px;
	}
}
.date_change {
	position: relative;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	span {
		margin: 0 20px;
		font-size: 22px;
	}
	.el-icon {
		cursor: pointer;
	}
}
.today {
	position: absolute;
	right: 20px;
	padding: 6px 10px;
	background: #eeeeee;
	border-radius: 4px;
	color: #999999;
	cursor: pointer;
	font-size: 16px !important;
}
.today:hover {
	background: #d0d0d0;
	color: #ffffff;
}
ul {
	padding: 20px 20px 0px 20px;
	display: flex;
	justify-content: space-evenly;
	text-align: center;
	margin: 0;

	li {
		list-style: none;
		width: 13.5%;
		background: #ffdbdd;
		color: #be1a21;
		padding: 8px 0;
		font-weight: 600;
		border-radius: 3px;
	}
}
:deep(.myRl) {
	.el-calendar__header {
		visibility: hidden;
		height: 0;
		padding: 0;
	}
	thead {
		display: none;
	}
}
.isPunched {
	position: absolute;
	right: 0.9375rem;
	top: 0.9375rem;
	display: inline-block;
	border-radius: 50%;
	width: 1.4rem;
	height: 1.4rem;
	background: url(../../assets/images/mainImg/ok.png) no-repeat;
	background-size: contain;
}

.noPunched {
	position: absolute;
	right: 0.9375rem;
	top: 0.9375rem;
	display: inline-block;
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	background: #f51f28;
}
:deep(.el-calendar) {
	.el-calendar-day {
		height: 12vh;
	}
	.el-calendar__body {
		padding-bottom: 0;
		padding: 12px 30px 25px;
	}
	.current {
		position: relative;
	}
}
.tk {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.dateBu {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #1e1e1e;
}
.dkTime {
	color: #1ac45f !important;
	font-weight: 400;
	margin-right: 0.625rem;
}
.dkType {
	color: #999999 !important;
	font-weight: 400;
}
.dkNzt {
	padding: 0.0625rem 0.3125rem;
	border-radius: 0.3125rem;
	color: #ffffff !important;
	font-weight: 400;
	font-size: 12px;
}
.dkLi {
	display: flex !important;
	flex-flow: column !important;
	align-items: flex-start !important;
	margin-left: 1rem;
	padding: 0 !important;
	p {
		margin: 0;
		margin-top: 0.25rem;
		margin-left: 0.15rem;
		font-size: 12px;
		font-weight: 400;
	}
}
.wqcls {
	margin-left: 0;
	padding: 1px 5px;
	border: 0.01em #3cb87f solid;
	border-radius: 0.2em;
	color: #3cb87f;
	font-weight: 400;
	font-size: 12px;
}
.bzStyle {
	color: #a3a5a6;
	margin-left: 15px;
	font-size: 14px;
}
.lookImg {
	border: 1px solid #f78989;
	cursor: pointer;
	color: #f78989;
	padding: 1px 5px;
	font-size: 10px;
	margin-left: 10px;
}
.xdwF {
	width: 100%;
	height: 113px;
	position: absolute;
	top: -42px;
	right: -8px;
}
.dkList {
	display: flex;
	flex-flow: column;
	justify-content: start;
	text-align: left;
	margin-top: 8px;
	padding: 0;
	max-height: 350px;
	overflow: auto;
	li {
		width: 92%;
		// margin-bottom: 10px;
		display: flex;
		flex-flow: row;
		justify-content: flex-start;
		align-items: center;
		background: none;
		padding: 4px 0;
		span {
			color: #1e1e1e;
			font-weight: 400;
		}
	}
	.dkZcZt {
		width: 0.4rem;
		height: 0.4rem;
		background: #1ac45f !important;
		border-radius: 50%;
		margin-right: 8px;
	}
	.dkYcZt {
		width: 0.4rem;
		height: 0.4rem;
		background: #f51f28 !important;
		border-radius: 50%;
		margin-right: 8px;
	}
	.mrzt {
		width: 0.4rem;
		height: 0.4rem;
		background: #d6d6d6;
		border-radius: 50%;
		margin-right: 8px;
	}
}
:deep(.el-calendar) {
	.current {
		font-size: 22px;
	}
	.el-calendar-table__row {
		.next,
		.prev {
			font-size: 22px;
			pointer-events: none;
		}
	}
}
.dateRl {
	font-size: 22px;
	margin: 0;
}
.wqs {
	color: #1ac45fff !important;
}
u {
	cursor: pointer;
	color: #000;
}
.mr {
	margin-right: 10px;
}
.mr-big {
	margin-right: 2rem;
}
</style>
